<template>
	<div class="app-container">
		<div class="header">
			<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />合同信息
			<span style="float: right; margin-top: -5px">
				<el-button @click="toCheckLogs(form.treatyId)" type="primary" size="small" plain>查看审核日志</el-button>
				<el-button v-if="form.treatyStatus == '3'" type="primary" size="small" plain @click="editRow(form)">修改</el-button>
				<el-button v-if="form.treatyStatus == '3'" type="primary" size="small" plain @click="deleteRow(form.treatyId)">删除</el-button>
				<el-button
					v-if="form.treatyStatus == '1' && userStore.$state.roles.includes('yw1')"
					type="primary"
					size="small"
					plain
					@click="checkHetong(form)"
					>审核</el-button
				>
			</span>
		</div>
		<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="120px">
			<el-form-item prop="treatyCode" label="合同编号">
				<el-input disabled v-model="form.treatyCode" style="width: 50%" placeholder="请输入合同编号" />
			</el-form-item>
			<el-form-item prop="treatyName" label="合同名称">
				<el-input disabled v-model="form.treatyName" style="width: 50%" placeholder="请输入合同名称" />
			</el-form-item>
			<el-form-item prop="projectId" label="项目">
				<el-select
					disabled
					v-model="form.projectId"
					style="width: 50%"
					filterable
					remote
					reserve-keyword
					remote-show-suffix
					placeholder="请选择项目"
					:remote-method="remoteMethod"
					:loading="loading">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item prop="treatyCategory" label="合同类别">
				<el-select disabled v-model="form.treatyCategory" placeholder="请选择合同类别" style="width: 50%" size="default" clearable>
					<el-option v-for="dict in treaty_category" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item prop="treatyAuditMoney" label="审计金额">
				<el-input-number disabled :controls="false" :precision="2" v-model="form.treatyAuditMoney" style="width: 50%" placeholder="请输入审计金额" />
			</el-form-item>
			<el-form-item prop="treatyTotalMoney" label="合同金额">
				<el-input-number disabled :controls="false" :precision="2" v-model="form.treatyTotalMoney" style="width: 50%" placeholder="请输入合同金额" />
			</el-form-item>
			<el-form-item prop="treatyTime" label="签订时间">
				<el-date-picker
					clearable
					v-model="form.treatyTime"
					disabled
					style="width: 340px"
					value-format="YYYY-MM-DD"
					type="date"
					:placeholder="`请选择签订时间`"></el-date-picker>
			</el-form-item>
			<el-form-item label="文件上传">
				<el-upload
					disabled
					v-model:file-list="filelist"
					:action="fileUrl"
					ref="upload"
					:headers="token"
					name="files"
					:on-success="handleSuccess"
					:on-remove="handleRemove"
					style="width: 340px">
					<el-button type="primary">上传</el-button>
				</el-upload>
			</el-form-item>
			<el-form-item label="文件下载">
				<el-button type="primary" @click="openLoad">下载</el-button>
			</el-form-item>
			<el-form-item prop="treatyStatus" label="审核">
				<el-radio-group disabled v-model="form.treatyStatus">
					<el-radio label="1">待审核</el-radio>
					<el-radio label="2">审核通过</el-radio>
					<el-radio label="3">审核不通过</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item prop="treatyNote" label="审核备注">
				<el-input disabled v-model="form.treatyNote" :rows="5" type="textarea" style="margin-bottom: 5px" placeholder="审核备注" />
			</el-form-item>
		</el-form>
		<div style="line-height: 80px; height: 80px; padding-left: 100px">
			<el-button @click="reback">返回</el-button>
		</div>
		<el-dialog v-model="openL">
			<div
				v-for="(item, index) in dowloadList"
				:key="index"
				style="line-height: 30px; color: rgb(2, 121, 190); cursor: pointer"
				@click="dowloadFile(item)">
				{{ item }}
			</div>
		</el-dialog>
	</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
import { download } from '@/utils/request'
import { getConfigKey } from '@/api/system/config'
import { selectProject, updateTreaty, treatyDetail } from '@/api/project/project'
import { useRoute } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'
import { getToken } from '@/utils/auth'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const { proxy } = getCurrentInstance()
const { treaty_category } = proxy.useDict('treaty_category')
const tagsView = useTagsViewStore()
const router = useRouter()
const route = useRoute()
const baseform = ref()
const fileUrl = ref('')
const dowloadList = ref([])

const pre = ref('')
getConfigKey('file_upload').then((response) => {
	fileUrl.value = response.msg
})
const init = () => {
	treatyDetail(route.query.id).then((res) => {
		for (let item in form) {
			if (res.data[item]) {
				form[item] = res.data[item] + ''
			}
		}
		form['projectTreatyFileList'] = res.data.projectTreatyFileList.map((e) => e.fileAdress)
		if (form['projectTreatyFileList']) {
			for (let item of form['projectTreatyFileList']) {
				filelist.value.push({ name: item, url: item })
			}
			dowloadList.value = [...form['projectTreatyFileList']]
		}
		if (form.treatyAuditMoney) {
			form.treatyAuditMoney = Number(form.treatyAuditMoney)
		}
		if (form.treatyTotalMoney) {
			form.treatyTotalMoney = Number(form.treatyTotalMoney)
		}
	})
}
getConfigKey('sys.upload').then((response) => {
	pre.value = response.msg
	init()
})
const token = { Authorization: 'Bearer ' + getToken() }

const form = reactive({
	treatyId: '',
	treatyCode: '',
	projectId: '',
	treatyName: '',
	treatyAuditMoney: undefined,
	treatyTotalMoney: undefined,
	treatyTime: '',
	projectTreatyFileList: [],
	projectTreatyImageList: [],
	treatyCategory: '',
	treatyStatus: '',
	treatyNote: ''
})

const rules = {
	treatyCode: [{ required: true, message: '合同编号不能为空', trigger: 'blur' }],
	projectId: [{ required: true, message: '项目编号不能为空', trigger: 'blur' }],
	treatyName: [{ required: true, message: '合同名称不能为空', trigger: 'blur' }],
	treatyAuditMoney: [{ required: true, message: '审计金额不能为空', trigger: 'blur' }],
	treatyTotalMoney: [{ required: true, message: '合同金额不能为空', trigger: 'blur' }],
	treatyTime: [{ required: true, message: '签订时间不能为空', trigger: 'blur' }],
	treatyCategory: [{ required: true, message: '合同类别不能为空', trigger: 'blur' }]
}
const loading = ref(false)
const list = ref([])
const options = ref([])

selectProject().then((res) => {
	list.value = res.map((e) => {
		return {
			label: e.projectName,
			value: e.projectId + ''
		}
	})
	options.value = list.value
})
const remoteMethod = (query) => {
	if (query) {
		loading.value = true
		setTimeout(() => {
			loading.value = false
			options.value = list.value.filter((item) => {
				return item.label.toLowerCase().includes(query.toLowerCase())
			})
		}, 200)
	} else {
		options.value = list.value
	}
}
const toCheckLogs = (id) => {
	router.push({
		path: '/log/logManage',
		query: { id: id, type: 5 }
	})
}
const checkHetong = (row) => {
	router.push({
		path: '/project/contractCheck',
		query: { id: row.treatyId }
	})
}
const editRow = (row) => {
	router.push({
		path: '/project/editContract',
		query: { id: row.treatyId }
	})
}
const deleteRow = (id) => {
	proxy.$modal
		.confirm('是否删除此数据？')
		.then(() => {
			return delTreaty(id)
		})
		.then(() => {
			search()
			proxy.$modal.msgSuccess('删除成功')
		})
		.catch(() => {})
}
const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
const filelist = ref([])
const handleSuccess = () => {
	form.projectTreatyFileList = filelist.value.map((e) => {
		return e.response ? e.response.data[0] : e.url
	})
}
const handleRemove = () => {
	form.projectTreatyFileList = filelist.value.map((e) => {
		return e.response ? e.response.data[0] : e.url
	})
}
const dowloadFile = (file) => {
	download({ url: file }).then()
}
const openL = ref(false)
const openLoad = () => {
	openL.value = true
}
</script>
<style lang="scss" scoped>
.header {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	margin-bottom: 5px;
}
</style>
